<script setup lang='ts'>
  import { reactive } from 'vue';
  import { smsHandleApi } from '@/api/controller';
  import { ToastError, Toastloading } from '@/utils/public';
  import Pagination from "@/components/Pagination/index.vue";
  const action = reactive({
    dialogFormVisible:false,
    title:'',
    total:0,
    list:[]
  })
  const listQuery = reactive({
    page: 1,
    limit: 20,
  })
  const getsmsInfo = async(smsid:number = 0)=>{
    if(!smsid) return ToastError('缺少smsid')
    const loading = Toastloading()
    const res = await smsHandleApi.getdetial({smsid})
    const { data=[], total=0 } = res.data
    action.list = data
    action.total = total
    loading.close()
  }
  const openDialog = async(query:any = {})=> {
    const { id=0 } = query
    if(id) await getsmsInfo(id)
    action.title = `短信详情ID:${id}`
    action.dialogFormVisible = true
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
      top="5vh"
      width="60%"
      class="xm-dialog"
      v-model="action.dialogFormVisible"
      :title="action.title">
      <el-table
        class="xm-main xm-TableCenter"
        :data="action.list"
        border>
        <el-table-column width="120" prop="id" label="ID" />
        <el-table-column width="180" prop="receiveTime" label="发送时间" />
        <el-table-column min-width="120" prop="phone" label="发送的手机号" />
        <el-table-column width="120" sortable prop="status" label="状态" />
      </el-table>
      <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
        v-model:limit="listQuery.limit" @pagination="getsmsInfo" />
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped >
  .xm-dialog{
      .el-input {
          width: calc($inputWidth);
      }
  }
</style>